<template>
  <div class="order-detail">
    <div style="width: 100%;text-align: right;margin-bottom: 20px">
      <el-button @click="back" type="primary">返回</el-button>
    </div>
    <!-- 订单状态进度条 -->
    <el-card class="status-card">
      <el-steps align-center :active="step" finish-status="success">
        <el-step title="等待下单"></el-step>
        <el-step title="充电中"></el-step>
        <el-step title="结算中"></el-step>
        <el-step title="已完成"></el-step>
      </el-steps>
    </el-card>

    <div class="detail-content">
      <!-- 费用信息 -->
      <el-card class="info-card">
        <div slot="header">
          <span class="card-title">订单信息</span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单号">{{ orderDetail.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="支付类型">
            <el-tag v-if="orderDetail.orderType === 'order_top_up'" type="success">余额支付</el-tag>
            <el-tag v-if="orderDetail.orderType === 'top_up'" type="success">预支付</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="充电费用">{{ orderDetail.chargedElectricity }}元</el-descriptions-item>
          <el-descriptions-item label="支付金额">{{ orderDetail.amount || 0 }}元</el-descriptions-item>
          <el-descriptions-item label="是否续充">
            <el-tag v-if="!addDetails.length" type="success">是</el-tag>
            <el-tag v-if="addDetails.length" type="info">否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="续充金额"  v-if="addDetails.length">
            {{ addDetails[0].addAmount}} 元
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <!-- 计费明细 -->
      <el-card class="info-card">
        <div slot="header">
          <span class="card-title">计费明细</span>
        </div>
        <el-table :data="billingDetails" style="width: 100%" border>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="timeRange" label="时段"></el-table-column>
          <el-table-column prop="chargeFee" label="电量(元/度)">
          </el-table-column>
          <el-table-column prop="serviceFee" label="服务费(元/度)"></el-table-column>
        </el-table>
      </el-card>
      <!-- 设备信息 -->
      <el-card class="info-card">
        <div slot="header">
          <span class="card-title">设备信息</span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="站点名称">{{ stationDetail.plotName }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{ stationDetail.address }}</el-descriptions-item>
          <el-descriptions-item label="设备编号">{{ deviceDetail.deviceNo }}</el-descriptions-item>
          <el-descriptions-item label="设备名称">{{ deviceDetail.deviceName }}</el-descriptions-item>
          <el-descriptions-item label="设备类型">{{ deviceDetail.currentForm }}</el-descriptions-item>
          <el-descriptions-item label="枪口编号">{{ orderDetail.portCode}}</el-descriptions-item>
          <el-descriptions-item label="充电时长">{{ formateTime(orderInfo.chargingTime) }}</el-descriptions-item>
          <el-descriptions-item label="电流">{{ orderInfo.current }}A</el-descriptions-item>
          <el-descriptions-item label="电压">{{ orderInfo.voltage }}V</el-descriptions-item>
          <el-descriptions-item label="功率">{{ power.value  }}{{ power.unit }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <!-- 用户信息 -->
      <el-card class="info-card">
        <div slot="header">
          <span class="card-title">用户信息</span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="用户名">{{ orderDetail.nickname}}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ orderDetail.mobile }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

    </div>
  </div>
</template>

<script>

import {http} from "@/api";

export default {
  name: 'OrderDetail',
  data() {
    return {
      stationDetail: {},
      orderDetail: {},
      orderInfo: {},
      deviceDetail: {},
      step: 0,
      billingDetails: [
      ],
      addDetails: []
    }
  },
  computed: {
    power() {
      let power = Number(this.orderInfo.power || 0)
      if (isNaN(power)) return  {
        value: 0,
        unit: 'KW'
      }
      if (!power) {
        return {
          value: 0,
          unit: 'KW'
        }
      } else {
        if (power >= 1000) {
          return {
            value: (power / 1000).toFixed(2),
            unit: 'KW'
          }
        } else {
          return  {
            value:power,
            unit: 'W'
          }
        }

      }
    },
  },
  created() {
    http.order.read({
      orderId: this.$route.params.id
    }).then(res => {
      this.orderDetail = res.data
      if (res.data.orderState === 'DRAFT') {
        this.step = 0
      } else if (res.data.orderState === 'NOT_PAY') {
        this.step = 1
      } else if (res.data.orderState === 'WAIT_SETTLEMENT') {
        this.step = 2
      } else if (res.data.orderState === 'FINISH') {
        this.step = 4
      }
      this.billingDetails = (res.data.orderDetailList || []).map(item => {
        let typeMap = {
          // 0123 尖峰平谷
          0: '尖',
          1: '峰',
          2: '平',
          3: '谷'
        }
        return {
          timeRange: `${item.startTime}-${item.endTime}`,
          type: typeMap[item.ruleType] || item.ruleType,
          ...item
        }
      }).filter(item => item.chargeFee || item.serviceFee)
      console.log(this.billingDetails)
      if (res.data.stationId) {
        http.device.read(res.data.stationId).then(res => {
          this.deviceDetail = res.data || {}
        })
      }
      if (res.data.plotId) {
        http.plot.read(res.data.plotId).then(res => {
          this.stationDetail = res.data || {}
        })
      }

      this.addDetails = res.data.orderExtendList || []
    })
    http.order.statusDetail({
      orderId: this.$route.params.id
    }).then(res => {
      this.orderInfo = {
        percentage: res.data.soc || 0,
        chargingTime: res.data.haveChargedTime,
        fee: res.data.chargeMoney,
        voltage: res.data.chargeVoltage,
        current: res.data.chargeElectricity,
        power: res.data.chargePower
      }
    })
  },
  methods: {
    // 获取订单状态文本
    getStatusText(status) {
      const statusMap = {
        'NOT_CHARGING': '待充电',
        'CHARGING': '充电中',
        'START_FAIL': '充电失败',
        'CHARGING_COMPLETE': '已完成'
      }
      return statusMap[status] || status
    },

    formateTime(minutes) {
      if (!minutes) return 0
      if (minutes < 60) {
        return  minutes + '分钟'
      }

      var hours = Math.floor(minutes / 60);
      var remainingMinutes = minutes % 60;
      return hours + "时" + remainingMinutes + "分";
    },
    back() {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.order-detail {
  background-color: #f5f7fa;
  .status-card {
    margin-bottom: 20px;

    .el-steps {
      padding: 20px;
    }
  }

  .detail-content {
    display: grid;
    gap: 20px;
  }

  .info-card {
    .card-title {
      font-size: 16px;
      font-weight: bold;
    }

    .payment-info {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
  }

  :deep(.el-descriptions) {
    margin-bottom: 0;
  }

  :deep(.el-descriptions-item__label) {
    width: 120px;
    color: #606266;
  }

  :deep(.el-table) {
    margin-bottom: 0;
  }
}
</style>
